<template>
    <div class="container-left">
        <el-row style="margin-top: 10px">
            <el-col>
                <el-form ref="form" :model="form" label-width="85px" size="small">
                    <el-row>
                        <el-col :span="9">
                            <el-form-item label="信息点" prop="sensorId">
                                <el-select v-model="form.sensorId"
                                           placeholder="请选择信息点"
                                           clearable
                                           size="small"
                                           @change="changeData"
                                >
                                    <el-option
                                        v-for="item in sensorList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="时间范围" prop="beginTime">
                                <el-date-picker
                                    v-model="form.time"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    value-format="timestamp"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions"
                                    @change="changeData"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-form>
                <LineChart title="信息点" :chart-data="chartData" isSlider="inside" :xAxisData="echartsX" :key="num" height="400px"/>
            </el-col>
        </el-row>
        <!--        <el-row style="margin-top: 10px;margin-left: 10px">-->
        <!--            <el-col>-->
        <!--                <lineChart2></lineChart2>-->
        <!--            </el-col>-->
        <!--        </el-row>-->
        <el-row style="margin-top: 20px;">
            <el-col>
                <ScrollChart height="350px"></ScrollChart>
            </el-col>
        </el-row>

    </div>
</template>

<script>

import ScrollChart from '@/views/home/right/ScrollChart.vue'
import LineChart from '@/views/common/chart/LineChart'
import lineChart2 from '@/views/home/right/LineChart2.vue'
import BarChart from '@/views/home/right/BarChart.vue'
import {getSensorHistorySingleData} from '@/api/biz/sensorHistoryData'
import {listSelect} from '@/api/equipment/sensor'

export default {
    name: 'left',
    components: {LineChart, ScrollChart, BarChart, lineChart2},
    data() {
        return {
            // 表单参数
            form: {
                sensorId: null,
                resource: 'slider',
                time: [new Date().getTime(), new Date().getTime()]
            },
            chartData: [
                {
                    name: '模拟数据',
                    data: [
                        5, 7, 9, 8, 11, 15, 16, 4, 20, 13
                    ]
                }
            ],
            sensorList: [],
            echartsX: [
                '2020-10-01 10:00:00',
                '2020-10-01 10:15:00',
                '2020-10-01 10:30:00',
                '2020-10-01 10:45:00',
                '2020-10-01 11:00:00',
                '2020-10-01 11:15:00',
                '2020-10-01 11:30:00',
                '2020-10-01 11:45:00',
                '2020-10-01 12:00:00',
                '2020-10-01 12:15:00'
            ],
            pickerOptions: {
                shortcuts: [{
                    text: '今日',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        picker.$emit('pick', [start.getTime(), end.getTime()])
                    }
                }, {
                    text: '最近三天',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }]
            },
            num: 0
        }
    },
    created() {
        this.getSensorSingleData()
        this.getSensorList()
    },
    methods: {
        getSensorList() {
            listSelect().then(response => {
                this.sensorList = response.data
                if (this.sensorList.length > 0) {
                    this.form.sensorId = this.sensorList[0]['value']
                }
                this.getSensorSingleData()
            })
        },
        // 获取曲线数据
        getSensorSingleData() {
            let sensorId = this.form.sensorId
            if (sensorId == null) {
                sensorId = 0
            }
            let obj = {
                sensorId: sensorId,
                beginTime: this.form.time[0],
                endTime: this.form.time[1]
            }
            getSensorHistorySingleData(obj).then(res => {
                console.log('历史数据', res)
                this.chartData[0].name = res.data.sensorName
                if (res.data.echartsX.length > 0) {
                    this.echartsX = res.data.echartsX
                    this.chartData[0].data = res.data.data
                } else {
                    this.echartsX = [
                        '2020-10-01 10:00:00',
                        '2020-10-01 10:15:00',
                        '2020-10-01 10:30:00',
                        '2020-10-01 10:45:00',
                        '2020-10-01 11:00:00',
                        '2020-10-01 11:15:00',
                        '2020-10-01 11:30:00',
                        '2020-10-01 11:45:00',
                        '2020-10-01 12:00:00',
                        '2020-10-01 12:15:00'
                    ]
                    this.chartData = [
                        {
                            name: '模拟数据',
                            data: [
                                5, 7, 9, 8, 11, 15, 16, 4, 20, 13
                            ]
                        }
                    ]
                }
                this.num++
            })
        },
        changeData() {
            this.getSensorSingleData()
        },
    }
}
</script>

<style scoped lang="scss">
.container-left {
    //background-color: #a95812;
}
</style>
